{{ define "css" }}
{{ end }}
{{ define "js" }}
  <script>
    activateTabbarSwitcher("tabContent", "tab", "slots")
  </script>
{{ end }}

{{ define "content" }}
  <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
  <script type="text/javascript" src="/js/moment.min.js"></script>
  <script type="text/javascript" src="/js/daterangepicker.min.js"></script>
  <div class="container mt-2">
    <div class="my-3">
      <div class="d-md-flex py-2 justify-content-md-between">
        <h1 class="h4 mb-1 mb-md-0">
          <span class="ml-1 mr-1"><i class="fas fa-cube mr-2"></i>Slot Finder<span style="color:grey; font-size: 70%; padding-left: 10px;" id="live-highest-block"></span></span>
        </h1>
      </div>
    </div>
    <ul style="margin-bottom: -1px; " class="nav nav-tabs justify-content-start" id="tab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="slots-tab" data-toggle="tab" href="#slots" role="tab" aria-controls="slots" aria-selected="true">Slots</a>
      </li>
      <li class="nav-item" data-toggle="tooltip" data-original-title="Find the perfect time for your global events around epochs and slots">
        <a class="nav-link" id="upgrade-scheduler-tab" data-toggle="tab" href="#upgrade-scheduler" role="tab" aria-controls="upgrade-scheduler" aria-selected="true">Upgrade Scheduler</a>
      </li>
    </ul>
    <div class="tab-content" id="tabContent">
      <div class="tab-pane fade" id="slotsTabPanel" role="tabpanel" aria-labelledby="overview-tab">
        <div class="card block-card">
          {{ template "slot_finder" . }}
        </div>
      </div>
      <div class="tab-pane fade" id="upgrade-schedulerTabPanel" role="tabpanel" aria-labelledby="overview-tab">
        <div class="card block-card">
          {{ template "upgrade_scheduler" . }}
        </div>
      </div>
    </div>
  </div>
{{ end }}
